Els selectors descendents en CSS són selectors compostos que ens permeten seleccionar un element dins d'un altre.
Analitzem el html de l'exercici. Tenim dos h2: el primer fora del div i el segon dins el div. Si volguessim seleccionar el segon h2, podriem escriure una regla amb una etiqueta h2. El problema és que es seleccionaríen tots els h2.
Per seleccionar, l'h2 que està dins del div, podem utilitzar un selector descendent posant div, un espai i h2.
div h2 {
background-color: teal;
}
Quant al límit de descendència que podem donar, tècnicament no hi ha límit. Podríem posar html, body i title 2 i això seguiria funcionant. Però no és recomanable; les bones pràctiques indiquen que no és bona idea baixar més d'un nivell, és a dir, com a màxim tenir dos elements div, title 2. Això és alguna cosa que potser ara mateix no entengueu, però d'aquí a dos o tres classes, quan parlem de l'especificitat, entendreu per què no és bona idea utilitzar més de dos elements. De totes maneres, si en algun moment necessiteu baixar més elements o crear aquesta cadena de manera més llarga, ja us ensenyaré trucs per arribar al mateix punt però només amb dos elements. Així que recordeu que amb això podem seleccionar elements de forma descendent.
Altra cosa important que heu de recordar és que això se li denomina seleccionar fills. Estem dins d'un pare, entrem al div i l'h2 seria fill del div. En CSS no tenim cap manera de pujar en l'escala, és a dir, des d'aquest h2 no podríem seleccionar el div. Actualment, en el borrador de CSS de selectors que ja estan pel nivell 4, si no m'equivoco, s'està treballant en una pseudo-classe que sembla que ens permetrà seleccionar pares. Però de moment, cap navegador la suporta.
En la documentació de w3schools teniu més informació sobre els selectors i els seus patrons.